//修改账户
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import {Modal,Form,Input,Row,Col,Upload,Icon,Button,message} from 'antd';
import $ from 'jquery'
import * as tools from '../../tools/tools';

const FormItem = Form.Item;


class Modifyaccount extends Component{
    constructor(props){
        super(props);
     
    }

    handleSubmit = (e) => {         //表单提交函数（修改用户）
        e.preventDefault();
        console.log(this.props.modalid)
        this.props.form.validateFields((err, values) => {
            values.token = localStorage.token;
            if (!err) {
                console.log('Received values of form: ', values);
                tools.loginView(this).then(
                $.ajax({
                    type:'Post',
                    url: tools.apiUrl+'agency/agency_edit',
                    data:values,
                    success:(res)=>{
                        if(res.status ==1){
                            message.success('添加成功')
                        }else{
                            message.error(res.msg)
                        }
                        this.props.onCancel();
                        this.props.form.resetFields();
                    },
                })
            )
            }
        });
    }


    checkPassword=(rule, value, callback) =>{     //密码相同==>传值必须是(rule,value,callback)其中callback必须写里面内容
        const form = this.props.form;               //表单里面对输入框等的限制函数
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致！');
        } else if(form.getFieldValue('password')!=null && value == null || value == ''){
            callback("请重复密码!");
        }else{
            callback()
        }
    }

    Modifycancel=()=>{
        this.props.onCancel();
        this.props.form.resetFields();
    }

    // defalutdata=(data)=>{
    //     console.log(data)
    // }

    render(){
        const { getFieldDecorator } = this.props.form;
        // console.log(this.props.modalid)
        // console.log(this.props.selecteNum)
        // let defalutdata = this.defalutdata(this.props.selecteNum)
        return(
            <Modal title="修改账号" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                onOk={this.handleSubmit}
                onCancel={this.Modifycancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
                
                <Form layout="vertical" onSubmit={this.handleSubmit}>
                    <div>
                        <div className="modal_add_title"><span>账户信息</span></div>
                        <Row>
                            <Col span={13}>
                                <FormItem label="名称" hasFeedback >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                                    {getFieldDecorator('name', { 
                                        rules: [{  message: '请输入20字以内的名称!',min:1,max:20 }],
                                        initialValue:this.props.selecteNum.name
                                        })(
                                        <Input placeholder="请输入新名称" />    
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="电话" hasFeedback >
                                {getFieldDecorator('mobile', { 
                                    rules: [{message: '请输入11位手机号码!',pattern:"^[1][3,4,5,7,8][0-9]{9}$" }],
                                    initialValue:this.props.selecteNum.mobile
                                    })(          //pattern 正则判断
                                    <Input placeholder="请输入手机号"  />    
                                )}
                            </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="密码" hasFeedback >
                                {getFieldDecorator('password', { 
                                    rules: [{message: '请输入6-20位字符、数字!',min:6,max:20 }]
                                    })(
                                    <Input placeholder="请输入新密码"  type="password"/>    
                                )}
                            </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="重复密码" hasFeedback >
                                {getFieldDecorator('password1', { 
                                    rules: [{validator:this.checkPassword,min:6,max:20 }]})(                                       //validator  自己写js去控制
                                    <Input placeholder="请输入新密码"  type="password"/>    
                                )}
                            </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div>
                        <div className="modal_add_title"><span>银行信息</span></div>
                        <Row>
                            <Col span={13}>
                                <FormItem label="开卡人姓名" hasFeedback >
                                    {getFieldDecorator('cash_name',{
                                        rules:[{message:'请输入开卡人姓名'}],
                                        initialValue:this.props.selecteNum.cash_name
                                    })(
                                        <Input placeholder="请输入开卡人姓名" />    
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="开卡人账户" hasFeedback >
                                {getFieldDecorator('cash_card',{
                                    rules:[{message:'请输入银行账号'}],
                                    initialValue:this.props.selecteNum.cash_card
                                })(
                                    <Input placeholder="请输入银行账号"  />    
                                )}
                            </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="开卡人银行" hasFeedback >
                                {getFieldDecorator('cash_bank',{
                                    initialValue:this.props.selecteNum.cash_bank
                                })(
                                    <Input placeholder="请输入开卡银行"  type="password"/>    
                                )}
                            </FormItem>
                            </Col>
                            <Col span={13}>
                            <FormItem label="所在银行支行" hasFeedback >
                                {getFieldDecorator('cash_branch_bank',{
                                    initialValue:this.props.selecteNum.cash_branch_bank
                                })(
                                    <Input placeholder="请输入具体支行名称"  type="password"/>    
                                )}
                            </FormItem>
                            </Col>
                        </Row>
                    </div>
                   
                    <div>
                        <div className="modal_add_title"><span>备注</span></div>
                        <FormItem >
                            {getFieldDecorator('remark',{
                                initialValue:this.props.selecteNum.remark
                            })(
                                <textarea name="" cols="100" rows="5" placeholder="请输入备注，最多250字"  maxLength="250" style={{resize:'none'}}></textarea>
                            )}
                           
                        </FormItem>
                    </div>
                </Form>
            </Modal>
        )
    }
}
const Modify  = Form.create()(Modifyaccount);
export default Modify
